<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css"
          rel="stylesheet">
    <style>
        .color{
            color:red;
        }
        .other-color{
            color:blue;
        }
    </style>
</head>
<body>
<h1>操作元素属性的方法有</h1>
<table class="table">
    <tr>
        <th>方法</th>
        <th>说明</th>
    </tr>
    <tr>
        <td>getAttribute()</td>
        <td>获取属性值</td>
    </tr>
    <tr>
        <td>hasAttribute()</td>
        <td>检查元素节点是否包含特定属性</td>
    </tr>
    <tr>
        <td>setAttribute()</td>
        <td>设置属性值</td>
    </tr>
    <tr>
        <td>removeAttribute()</td>
        <td>从元素节点移除属性</td>
    </tr>
</table>
<h1>本示例要做的事</h1>
<ol>
    <li>找到要访问的元素，放到临时变量中</li>
    <li>判断它是否有特定的属性</li>
    <li>读取它的属性</li>
    <li>修改它的属性</li>
</ol>
<ul>
    <li class="color">油条</li>
    <li class="color" id="b">包子</li>
    <li class="color">米饺</li>
    <li class="color" id="d"><a>鱼粉</a></li>
</ul>

<script>
    // 找到要操作的元素
    var EL = document.getElementById('b');
    // 判断是否有属性class
    if(EL.hasAttribute('class')){
        alert(EL.getAttribute('class'));
        // 修改属性
        EL.setAttribute('class','other-color');
    }

</script>
</body>
</html>